<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=\, initial-scale=1.0" />
    <title>canvas</title>
    <style>
      .canvas {
        background-color: gray;
      }
    </style>
  </head>
  <body>
    <!-- 1.准备canvas 容器，指定宽高 -->
    <canvas class="canvas" width="1200" height="400"></canvas>
    <script>
      // 2.通过canvas容器获取画笔
      const canvas = document.querySelector(".canvas");
      const context = canvas.getContext("2d");
      // 3.绘画
      // console.log(context);
      // 4.清除绘画的路径，多个图形就不会连接在一起
      // context.beginPath()
      // context.closePath()
      // 5.绘制线段
      context.beginPath();
      context.moveTo(100, 100); // moveTo(x,y)
      context.lineTo(200, 200); // lineTo(x,y)
      context.lineTo(300, 100);
      context.lineTo(100, 100);
      context.strokeStyle = "green"; // 闭合前修改样式，才会生效
      context.stroke(); //要闭合
      context.closePath();

      // 6.画矩形
      context.strokeStyle = "yellow";
      // stroke描边
      context.strokeRect(400, 100, 100, 100); // strokeRect(x, y, width, height)
      // fill填充
      context.fillStyle = "yellowgreen";
      context.fillRect(400, 250, 100, 100); // fillRect(x, y, width, height)
      // 7.画圆
      context.beginPath();
      context.arc(650, 150, 50, 0, Math.PI * 2, true); // arc(x, y, r, 起始角度, 结束角度, 是否顺时针绘画)
      // 描边
      context.stroke()
      context.closePath();
      // 填充
      // context.fill()
      // 8.绘制文字
      context.font='30px 宋体'
      context.strokeText('啊啊啊',800,100)
      // 9.清除矩形区域
      // 进行下一次绘画，清空上一次绘画的内容
      context.clearRect(0, 0, 1200, 400); // clearRect(x, y, width, height)
    </script>
  </body>
</html>
